import React, {Component} from "react";
import {View, Text, StyleSheet, TouchableOpacity, Image, PixelRatio, Dimensions} from "react-native";
import {color} from "../../widget/color";
const {width} = Dimensions.get('window').width;
import PropTypes from 'prop-types';

export default class DetailTopTabBar extends Component {

    static propType = {
        goToPage: PropTypes.func,
        activeTab: PropTypes.number,
        tabs: PropTypes.array,
        tabNames: PropTypes.array,
    };

    componentDidMount() {
        // this.props.scrollValue.addListener(this.setAnimationValue);
    }

    setAnimationValue({value}) {
        console.log(value);
    }

    render() {
        return (
            <View>
                <View style={{width:width,height:5,backgroundColor:'rgba(249, 249, 249, 1)'}}/>
                <View style={styles.tabs}>
                    {this.props.tabs.map((tab, i) => {
                        let text_style = this.props.activeTab === i ? styles.select_tab : styles.un_select_tab;
                        let styleself = this.props.activeTab === i ? styles.select_underline : styles.un_select_underline;
                        return (
                            <TouchableOpacity
                                key={i}
                                onPress={()=>this.props.goToPage(i)}>
                                <Text style={text_style}>
                                    {this.props.tabNames[i]}
                                </Text>
                                <View style={styleself}/>
                            </TouchableOpacity>
                        )
                    })}
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#ffffff',
        marginTop: 20
    },
    tabs: {
        width:width,
        height:54,
        backgroundColor:'white',
        // alignItems:'center',
        flexDirection:'row',
        justifyContent:'space-around',
    },
    tab: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor:'#F9F9F9',
    },
    tabItem: {
        flexDirection: 'column',
        alignItems: 'center',
    },
    submit_btn: {
        paddingTop:5,
        paddingBottom:5,
        paddingLeft:8,
        paddingRight:8,
        borderRadius: 13,
        backgroundColor: '#DB3843',
        height: 25,
        justifyContent: 'center',
        alignItems: 'center'
    },
    select_tab:{
        color:'black',
        fontWeight:'bold',
        fontSize:15,
        marginTop:20,
    },
    un_select_tab:{
        color:'black',
        fontWeight:'200',
        fontSize:15,
        marginTop:20,
    },
    select_underline:{
        backgroundColor:'rgba(222, 134, 39, 1)',
        marginTop:3,
        height:1,
    },
    un_select_underline:{
        height:0,
    },


});

